<template>
  <Descriptions :schema="detailSchema" :data="currentRow || {}">
    <template #is_stop="{ row }: { row: TableData }">
      <ElTag :type="row.is_stop === '0' ? 'success' : row.is_stop === '1' ? 'warning' : 'danger'">
        {{ row.is_stop === '0' ? '启用' : row.is_stop === '1' ? '停用' : t('tableDemo.commonly') }}
      </ElTag>
    </template>
  </Descriptions>

  <!--  <div class="p-10px">
    <ContentWrap title="相关组织">
      <Table
        v-model:pageSize="orgUserTableObject.pageSize"
        v-model:currentPage="orgUserTableObject.currentPage"
        :columns="orgUserAllSchemas.tableColumns"
        :data="orgUserTableObject.tableList"
        :loading="orgUserTableObject.loading"
        :pagination="{
          total: orgUserTableObject.count
        }"
        @register="orgUserRegister"
        :selection="false"
      >
        <template #action="{ row }">
          <ElButton type="warning" @click="action('function', row)" title="查看权限">
            查看权限
          </ElButton>
        </template> 
      </Table>
    </ContentWrap>
  </div>-->
  <div class="p-10px">
    <ContentWrap title="当前组织所属角色">
      <div class="mb-10px">
        <ElButton type="primary" @click="action('setRole', {})">设置角色</ElButton>
      </div>
      <Table
        v-model:pageSize="userRoleTableObject.pageSize"
        v-model:currentPage="userRoleTableObject.currentPage"
        :columns="userRoleAllSchemas.tableColumns"
        :data="userRoleTableObject.tableList"
        :loading="userRoleTableObject.loading"
        :pagination="{
          total: userRoleTableObject.count
        }"
        @register="userRoleRegister"
        :selection="false"
      >
        <template #action="{ row }">
          <ElButton type="warning" @click="action('delRole', row)" title="删除"> 删除 </ElButton>
        </template>
      </Table>
    </ContentWrap>
  </div>

  <Dialog v-model="dialogVisible" :title="dialogTitle">
    <Tree
      v-if="actionType == 'function'"
      :treeProps="treeProps"
      :treeData="treeData"
      :nodeKey="treeKey"
      ref="treeRef"
    />
    <TreeRole
      v-if="actionType == 'setRole'"
      :treeProps="treeRoleProps"
      :treeData="treeRoleData"
      :nodeKey="treeRoleKey"
      ref="treeRoleRef"
    />
    <template #footer>
      <ElButton v-if="actionType == 'setRole'" type="primary" @click="save('setRole')">
        {{ t('exampleDemo.save') }}
      </ElButton>
      <ElButton @click="dialogVisible = false">{{ t('dialogDemo.close') }}</ElButton>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import {
  PropType,
  reactive,
  ref,
  unref,
  // h,
  watch
} from 'vue'
import type { TableData } from '@/api/role/types'
import { Descriptions } from '@/components/Descriptions'
import { useI18n } from '@/hooks/web/useI18n'
import { ElTag, ElButton, ElMessageBox } from 'element-plus'
// import { ucOrgUserListApi } from '@/api/uc/orgUser'
import type { TableData as orgUserTableData } from '@/api/uc/orgUser/types'
import { ContentWrap } from '@/components/ContentWrap'
import { Table } from '@/components/Table'
import { Dialog } from '@/components/Dialog'
import { useTable } from '@/hooks/web/useTableTest'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import Tree from './Tree.vue'
import { ucFaListApi } from '@/api/uc/function'
import { ucSysRoleFaSeeApi } from '@/api/uc/sysRole'
// import { ucOrgRoleListAdminApi } from '@/api/uc/orgRole'
import { ucRoleListApi } from '@/api/uc/role'
import {
  ucUserRoleListAdminApi,
  ucUserRoleSetAdminApi,
  ucUserRoleDelAdminApi
} from '@/api/uc/userRole'
import TreeRole from './TreeRole.vue'
const { t } = useI18n()

const props = defineProps({
  currentRow: {
    type: Object as PropType<Nullable<TableData>>,
    default: () => null
  },
  detailSchema: {
    type: Array as PropType<DescriptionsSchema[]>,
    default: () => []
  }
})

/****************************** 相关组织列表 start ******************************/
const treeRoleProps = ref({})
// const orgUserTable = useTable<
//   {
//     total: number
//     list: any[]
//   },
//   any
// >({
//   getListApi: ucOrgUserListApi,
//   response: {
//     data: 'data',
//     count: 'count'
//   }
// })

// const orgUserCrudSchemas = reactive<CrudSchema[]>([
//   {
//     field: 'org_name',
//     label: '组织名称',
//     search: {
//       show: false
//     },
//     form: {
//       show: false
//     },
//     table: {
//       show: true
//     }
//   },
//   {
//     field: 'is_owner',
//     label: '是否所有者',
//     width: 100,
//     formatter: (_: Recordable, __: TableColumn, cellValue: number | string) => {
//       return h(
//         ElTag,
//         {
//           type: cellValue == '1' ? 'success' : cellValue == '0' ? 'warning' : 'danger'
//         },
//         () => (cellValue == '1' ? '是' : cellValue == '0' ? '否' : '未知')
//       )
//     },
//     form: {
//       show: false
//     }
//   },
//   // {
//   //   field: 'role_name',
//   //   label: '所属角色',
//   //   search: {
//   //     show: false
//   //   },
//   //   form: {
//   //     show: false
//   //   },
//   //   table: {
//   //     show: true
//   //   }
//   // },
//   // {
//   //   field: 'role_id',
//   //   label: '所属角色',
//   //   search: {
//   //     show: false
//   //   },
//   //   form: {
//   //     // component: 'DialogRefer',
//   //     // componentProps: {
//   //     //   getListApi: roleListApi,
//   //     //   response: {
//   //     //     count: 'count',
//   //     //     data: 'data'
//   //     //   },
//   //     //   title: '选择所属角色（双击选择）',
//   //     //   nameField: 'role_name',
//   //     //   valueField: 'role_id',
//   //     //   crudSchemas: [
//   //     //     {
//   //     //       field: 'role_name',
//   //     //       label: '角色名称',
//   //     //       fixed: 'left',
//   //     //       search: {
//   //     //         show: true
//   //     //       }
//   //     //     }
//   //     //   ]
//   //     // },
//   //     show: true
//   //   },
//   //   table: {
//   //     show: false
//   //   }
//   // },
//   {
//     field: 'is_stop',
//     label: '是否停用',
//     formatter: (_: Recordable, __: TableColumn, cellValue: number | string) => {
//       return h(
//         ElTag,
//         {
//           type: cellValue == '0' ? 'success' : cellValue == '1' ? 'warning' : 'danger'
//         },
//         () => (cellValue == '0' ? '启用' : cellValue == '1' ? '停用' : '未知')
//       )
//     },
//     form: {
//       component: 'Select',
//       componentProps: {
//         options: [
//           {
//             label: '启用',
//             value: '0'
//           },
//           {
//             label: '停用',
//             value: '1'
//           }
//         ]
//       }
//     }
//   }
//   // {
//   //   field: 'action',
//   //   width: 120,
//   //   fixed: 'right',
//   //   label: t('tableDemo.action'),
//   //   form: {
//   //     show: false
//   //   },
//   //   detail: {
//   //     show: false
//   //   }
//   // }
// ])
// const orgUserRegister = orgUserTable.register
// const orgUserTableObject = orgUserTable.tableObject
// const orgUserMethods = orgUserTable.methods

// const orgUserAllSchemas = useCrudSchemas(orgUserCrudSchemas).allSchemas

// const orgUserGetList = orgUserMethods.getList

/****************************** 相关组织列表 end ******************************/

/****************************** 和树结构相关 start ******************************/
const treeRef = ref<ComponentRef<typeof Tree>>()
const treeProps = ref({})
const treeData = ref([])
const treeKey = ref('')
const treeRoleRef = ref<ComponentRef<typeof TreeRole>>()
const treeRoleKey = ref('')
const treeRoleData = ref([])
/****************************** 相关组织列表 end ******************************/

const actionType = ref('')
const dialogVisible = ref(false)
const dialogTitle = ref('')
const action = async (type: string, row: orgUserTableData = {}) => {
  actionType.value = type
  let treeRes: any
  let res: any
  switch (type) {
    case 'function':
      dialogTitle.value = '查看权限'
      dialogVisible.value = true
      treeProps.value = {
        children: 'children',
        label: 'fa_name',
        disabled: 'disabled'
      }
      treeKey.value = 'fa_id'
      treeRes = await ucFaListApi({})
        .catch(() => {})
        .finally(() => {})
      if (treeRes) {
        console.log(1111, treeRes.data, allDisabled(treeRes.data))
        treeData.value = allDisabled(treeRes.data)
      }
      // 查询出该角色的菜单权限
      res = await ucSysRoleFaSeeApi({ role_id: row.role_id })
        .catch(() => {})
        .finally(() => {})
      if (res) {
        let ids: any = []
        res.data.forEach((item) => {
          ids.push(item.fa_id)
        })
        const tree = unref(treeRef)
        tree!.setCheckedKeys(ids)
      }
      break
    case 'setRole':
      dialogTitle.value = '关联角色'
      dialogVisible.value = true
      treeRoleProps.value = {
        children: 'children',
        label: 'role_name',
        disabled: 'disabled'
      }
      treeRoleKey.value = 'role_id'
      let RoleTreeRes = await ucRoleListApi({
        // org_id: props?.currentRow?.org_id,
        add_is_sys: true
      })
        .catch(() => {})
        .finally(() => {})
      if (RoleTreeRes) {
        console.log('RoleTreeRes', RoleTreeRes)
        treeRoleData.value = RoleTreeRes.data
      }
      let role_ids: any = []
      userRoleTableObject.tableList.forEach((item) => {
        role_ids.push(item.role_id)
      })
      const treeRole = unref(treeRoleRef)
      treeRole!.setCheckedKeys(role_ids)
      break
    case 'delRole':
      ElMessageBox.confirm('确定要删除这个角色？', '删除角色', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          ucUserRoleDelAdminApi({
            user_role_id: row.user_role_id
          })
            .catch(() => {})
            .finally(() => {
              userRoleGetList()
            })
        })
        .catch(() => {
          console.log('这里是取消confirm弹框')
        })
      break
    default:
      console.log('未知类型')
  }
}

// 全部设置成禁用
const allDisabled = (data) => {
  let newData: any = []
  data.forEach((item) => {
    let newItem: any = {
      disabled: true,
      ...item
    }
    if (item.children != null && item.children != '') {
      newItem.children = allDisabled(item.children)
    }
    newData.push(newItem)
  })
  return newData
}

/****************************** 相关角色列表 start ******************************/
const userRoleTable = useTable<
  {
    total: number
    list: any[]
  },
  any
>({
  getListApi: ucUserRoleListAdminApi,
  response: {
    data: 'data',
    count: 'count'
  }
})

const userRoleCrudSchemas = reactive<CrudSchema[]>([
  {
    field: 'role_name',
    label: '角色名称',
    search: {
      show: false
    },
    form: {
      show: false
    },
    table: {
      show: true
    }
  },
  {
    field: 'action',
    width: 120,
    fixed: 'right',
    label: t('tableDemo.action'),
    form: {
      show: false
    },
    detail: {
      show: false
    }
  }
])
const userRoleRegister = userRoleTable.register
const userRoleTableObject = userRoleTable.tableObject
const userRoleMethods = userRoleTable.methods
const userRoleAllSchemas = useCrudSchemas(userRoleCrudSchemas).allSchemas
const userRoleGetList = userRoleMethods.getList

const save = async (type: string) => {
  switch (type) {
    case 'setRole':
      const treeRole = unref(treeRoleRef)
      const role_ids = treeRole!.getCheckedKeys()
      const userRoleSetRes = await ucUserRoleSetAdminApi({
        // org_id: props.currentRow.org_id,
        user_id: props?.currentRow.user_id,
        ids: role_ids
      })
        .catch(() => {})
        .finally(() => {
          // loading.value.save = false
        })
      if (userRoleSetRes) {
        // 关闭 dialog
        // 成功 刷新列表查询
        userRoleGetList()
        dialogVisible.value = false
      }
      break
    default:
      console.log('未知类型')
  }
}
/****************************** 相关角色列表 end ******************************/

/****************************** 监听设置固定条件 start ******************************/
const newFixedSearch = ref({})
watch(
  () => props.currentRow,
  (val: any) => {
    if (!val) return
    // 设置固定条件
    newFixedSearch.value = {
      user_id: val.user_id
    }
    // orgUserTableObject.fixedSearch = newFixedSearch.value
    userRoleTableObject.fixedSearch = newFixedSearch.value
  },
  {
    deep: true,
    immediate: true
  }
)
/****************************** 监听设置固定条件 start ******************************/

/****************************** 初始化 start ******************************/
// orgUserGetList() //查询相关组织列表
userRoleGetList() //查询相关角色列表
/****************************** 初始化 end ******************************/
</script>
